<template>
  <div class="c-p body-bg c-flex-column">
    <img src="https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/live/live_rank_bg.png" class="c-w100 c-pa c-p-t0 c-p-l0 c-maxw640" alt="" />
    <section class="invite-list-box">
      <div class="c-flex-row c-aligni-center c-pb20 c-ph24" v-for="(item, index) in inviteList" :key="index">
        <div class="c-ww50 c-flex-row c-flex-center" v-if="index == 0 || index == 1 || index == 2">
          <img class="c-ww36" :src="RANK_IMG_MAP[index]" alt="" />
        </div>
        <div v-else class="c-ww50 c-textAlign-c rank-index c-fs24">
          {{ index * 1 + 1 }}
        </div>
        <div class="c-flex-grow1 c-w0 c-flex-row c-aligni-center c-pl10">
          <img class="c-ww70 c-hh70 c-brp50 avatar" :src="$addXossFilter(item.headimgurl || require('@/assets/defult_head.png'))" alt="" />
          <span class="c-ph10 c-text-ellipsis1 c-fs24 name">{{ (item.dynamicName || item.realName || item.nickname) | hiddenLiveUserName(isHideUserName) }}</span>
        </div>
        <div class="c-fs22 invite-text">
          <span>邀请</span>
          <span class="c-fw700 c-fc-sorange c-fs24">{{ item.inviteNum }}</span>
          <span>人</span>
        </div>
      </div>
      <div class="c-flex-row c-flex-center c-pv20 c-fs18 rank-index">
        <i class="iconfont icon-biaotizhuangshi-you c-rotate180 c-fs12"></i>
        <span class="c-ph16">仅展示前30名</span>
        <i class="iconfont icon-biaotizhuangshi-you c-fs12"></i>
      </div>
    </section>
    <footer v-if="myInvInfo" class="c-pa c-pz10 c-p-b0 c-p-l0 c-p-r0 c-bg-white c-flex-row c-aligni-center c-justify-sb c-ph24 c-pv16 my-inviteinfo">
      <div class="rank-index c-fs24 c-ww50 c-textAlign-c c-ml24 c-mr10 c-text-ellipsis1 c-text-hidden">{{myInvInfo.inviteRank}}</div>
      <img :src="$addXossFilter(myInvInfo.headimgurl || require('@/assets/defult_head.png'))" class="c-ww70 c-hh70 c-brp50 avatar" alt="头像" />
      <div class="c-pl10 c-flex-column c-flex-grow1 c-w0">
        <div class="c-fs24 name c-pr10 c-text-ellipsis1">{{myInvInfo.dynamicName || myInvInfo.realName || myInvInfo.nickname}}</div>
        <div class="c-fs20 c-fc-xblue c-mt4" v-if="myInvInfo.inviteNum > 0" @click="showInvite">
          点击查看我邀请的好友 ({{myInvInfo.inviteNum}}人)
          <!-- <span>邀请</span>
          <span class="c-fw700 c-fc-sorange c-fs24">{{ myInvInfo.inviteNum }}</span>
          <span>人</span> -->
        </div>
        <div v-else class="c-fs20 invite-text">暂未邀请</div>
      </div>
      <div class="invite-btn" @click="clickInvite">冲榜</div>
    </footer>
    <section class="invite-rules" @click="showRuleModal = true">如何邀请</section>
    <!-- 邀请规则弹窗 -->
    <div v-show="showRuleModal" class="c-translucent-balck50 c-text-hidden c-pz6 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="showRuleModal = false" data-type="cancel"></div>
    <section v-show="showRuleModal" class="c-pa c-p-l0 c-p-b0 c-w100 c-bg-white c-flex-column c-ph52 c-pb60 c-pz7 c-br-tl10 c-br-tr10">
      <div class="c-pv50 c-fs26 c-textAlign-c">
        只需三步，快速提升邀请排名
      </div>
      <div class="c-flex-row c-justify-sb c-fs12">
        <div class="c-flex-column c-flex-center">
          <i class="iconfont icon-iconfontzhizuobiaozhun49 c-fc-green c-fs40"></i>
          <div class="c-pt16 c-fs20">进入直播间</div>
        </div>
        <div class="c-flex-row c-pt16 c-opacity30">
          <div class="c-ww10 c-hh10 c-brp50 c-mr8 c-bg-vgreen"></div>
          <div class="c-ww10 c-hh10 c-brp50 c-mr8 c-bg-vgreen"></div>
          <div class="c-ww10 c-hh10 c-brp50 c-bg-vgreen"></div>
        </div>
        <div class="c-flex-column c-flex-center">
          <i class="iconfont icon-yaoqing1 c-fc-green c-fs40"></i>
          <div class="c-pt16 c-fs20">邀请好友观看</div>
        </div>
        <div class="c-flex-row c-pt16 c-opacity30">
          <div class="c-ww10 c-hh10 c-brp50 c-mr8 c-bg-vgreen"></div>
          <div class="c-ww10 c-hh10 c-brp50 c-mr8 c-bg-vgreen"></div>
          <div class="c-ww10 c-hh10 c-brp50 c-bg-vgreen"></div>
        </div>
        <div class="c-flex-column c-flex-center">
          <i class="iconfont icon-qunzu1 c-fc-green c-fs40"></i>
          <div class="c-pt16 c-fs20">好友进入直播间</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import { utilJs } from '@/utils/common.js';
const RANK_IMG_MAP = {
  '0': require('@/assets/i/wap/live/live_rank1.png'),
  '1': require('@/assets/i/wap/live/live_rank2.png'),
  '2': require('@/assets/i/wap/live/live_rank3.png')
};
export default {
  components: {},
  inject:['provideGetDynamicName'],
  props: {
    isHideUserName: {
      type: Boolean,
      default: false
    },
    showRankInfo: {
      type: Boolean,
      default: false
    },
    liveId:{
      type:Number,
      default:0,
    },
    detailId:{
      type:Number,
      default:0,
    },
    socialRoomId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      RANK_IMG_MAP: RANK_IMG_MAP,
      inviteList: [],
      myInvInfo: null,
      showRuleModal: false
    };
  },
  watch: {
    showRankInfo: {
      handler(val, oldVal) {
        this.showRuleModal = false;
        if (val) {
          this.getInviteList();
        }
      }
    }
  },
  methods: {
    showInvite() {
      this.$emit('showInvite');
    },
    getInviteList() {
      let url = `${global.apiurl}social/inviteList?socialId=${this.socialRoomId}`;
      //独立直播间走另外接口
      url = this.detailId ? `${global.apiurl}live/livePersonal/getDetailInviteList/${this.liveId}?detailId=${this.detailId}` : url;
      utilJs.getMethod(url, res => {
        this.myInvInfo = this.provideGetDynamicName(res.myRank);
        if (this.provideGetDynamicName) {
          res.rank.data.forEach(item => {
            item = this.provideGetDynamicName(item);
          })
        }
        this.inviteList = res.rank.data;
      });
    },
    clickInvite() {
      this.$emit('clickInvite');
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.body-bg{
  background-color: #FFD388;
}
.invite-list-box{
  flex-grow: 1;
  width: 15rem;
  height: 0;
  background: #ffffff;
  border: 0.2rem solid #fff4bf;
  border-radius: 0.7rem;
  position: relative;
  z-index: 1;
  margin: 3rem auto 1.5rem auto;
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.footer {
  box-shadow: 0px 0px 0.4rem 0.11rem rgba(0,0,0,0.05);
  z-index: 2;
}
.invite-rules {
  position: absolute;
  right: 0;
  top: 1.5rem;
  width: 2.6rem;
  height: 0.9rem;
  opacity: 1;
  background: rgba(255,255,255,0.80);
  border-radius: 0.6rem 0 0 0.6rem;
  color: #A0701C;
  font-size: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rank-index{
  color: #D5A357;
}
.avatar{
  border: 2px solid #fff4d9;
}
.name{
  color: #6E442D;
}
.invite-text{
  color: #A0701C;
}
.invite-btn{
  width: 2.7rem;
  height: 1.15rem;
  opacity: 1;
  background: linear-gradient(270deg,#ff7100, rgba(255,113,0,0.70));
  border-radius: 0.75rem;
  color: #fff;
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  }
.my-inviteinfo{
  border-top: 1px solid #f6f6f6;
}
</style>
